<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @row-click="rowClick"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClassName"
    :cell-class-name="tableCellClassName"
    :samewidth="samewidth"
    :default-expand-all="expand"
  >
    <!---->
    <!--:span-method="objectSpanMethod"-->


    <template v-for="header in tableHeader" v-if="header.isShow">

      <el-table-column v-if="header.type === 'expand'" type="expand">
        <template slot-scope="props">
          <template v-for="expands in props.row.expandList">
            <template v-for="expand in expands">
              <span class="expand-item">{{expand.label}}：{{expand.value===''?$getTextByLangKey('没有数据'):expand.value}}</span>
            </template>
            <br/>
          </template>

        </template>
      </el-table-column>

      <el-table-column
        v-if="header.type === 'selection'||header.type === 'index'||header.type === ''||typeof(header.type) === 'undefined'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop"
        :min-width="100"
      >
      </el-table-column>

      <!--该列类型为链接的时候 根据prop+link去查找url-->
      <el-table-column
        v-if="header.type === 'link'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <a :href="scope.row[header.prop+'_link']"
             class="table-link"
             style="display: inline-block;width: 100%;cursor:pointer ">{{ scope.row[header.prop] }}</a>
        </template>

      </el-table-column>

      <el-table-column
        v-if="header.type === 'number-input'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <el-input-number v-model="scope.row[header.prop]"
                           @change="handleChange(header.prop,scope.$index, scope.row,)"
                           :min="0" :max="99999999"
                           controls-position="right"
                           :disabled="!isAdmin"
                           size="small"
                           style="width:110px;"></el-input-number>
        </template>

      </el-table-column>

      <el-table-column
        v-if="header.type === 'number'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <el-input-number v-model="scope.row[header.prop]"
                           @change="handleChange(header.prop,scope.$index, scope.row,)"
                           :min="0" :max="99999999"
                           :controls="false"
                           :precision="0"
                           :disabled="!isAdmin"
                           style="width:84%;"></el-input-number>
        </template>

      </el-table-column>
      <el-table-column
        v-if="header.type === 'dotNumber'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <el-input-number v-model="scope.row[header.prop]"
                           @change="handleChange(header.prop,scope.$index, scope.row,)"
                           :min="0" :max="99999999"
                           :controls="false"
                           :disabled="!isAdmin"
                           style="width:84%;"></el-input-number>
        </template>

      </el-table-column>


      <el-table-column
        v-if="header.type === 'select'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <el-select v-model="scope.row[header.prop]" placeholder="请选择"
                     style="width:84%;" @change="handleChange(header.prop,scope.$index, scope.row,)">
            <el-option
              v-for="item in header.valueList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </template>

      </el-table-column>

      <!--该列类型为action的时候 根据数据中的action去判断显示的操作 edit_delete-->
      <el-table-column
        v-if="header.type === 'action'"
        :key="header.id"
        :type="header.type"
        :label="header.label"
        :width="header.width"
        :prop="header.prop">

        <template slot-scope="scope">
          <!--&& scope.row.action.contains('edit')-->
          <el-button
            v-if="typeof(scope.row.action)!=='undefined' && scope.row.action.indexOf('edit')!==-1"
            size="small"
            :disabled="!isAdmin"
            @click="handleEdit(scope.$index, scope.row)">{{$getTextByLangKey('编辑')}}
          </el-button>
          <el-button
            v-if="typeof(scope.row.action)!=='undefined' && scope.row.action.indexOf('delete')!==-1"
            size="small" type="danger"
            :disabled="!isAdmin"
            @click="handleDelete(scope.$index, scope.row)">{{$getTextByLangKey('删除')}}
          </el-button>

          <el-button
            v-if="typeof(scope.row.action)!=='undefined' && scope.row.action.indexOf('clear')!==-1"
            size="small" type="danger"
            :disabled="!isAdmin"
            @click="handleClear(scope.$index, scope.row)">{{$getTextByLangKey('计数器置零')}}
          </el-button>
        </template>

      </el-table-column>

    </template>
  </el-table>

</template>

<script>


  //        tableHeader: [{type: "index", isShow: true}, {
  //          prop: 'bomname',
  //          type: 'link',
  //          label: '名称',
  //          isShow: true
  //        }, {prop: 'price', label: '价格', isShow: true}, {type: "action", label: '操作', isShow: true}],
  //        tableData: [{bomname: 'dfdfdf',bomname_link:'/hellow', price: '10.25'}, {bomname: 'dfdfdf', price: '10.25'}, {
  //          id: 'fff',
  //          bomname: 'dfdfdf',
  //          price: '101.25',
  //          action: 'edit_delete'
  //        },],
  export default {
    name: "table-componet",
    props: ['tableHeader', 'tableData', 'samewidth', 'expand'],
    data() {
      return {
        isAdmin : localStorage.getItem("username") === 'admin',
      }
    },
    created: function () {
      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
//      '$route': 'fetchData'
//      '$route': 'clearData'
      'tableHeader': 'fetchData'
    },

    methods: {
//      clearData:function () {
//        this.tableHeader = []
//        this.tableData = []
//      },

      fetchData: function () {
        let tableHeader = this.samewidth ? this.tableHeader : this.setTableHeaderAutoWidth(this.tableHeader, this.tableData)

        for (let i = tableHeader.length - 1; i >= 0; i--) {
          if (!tableHeader[i].isShow || !tableHeader[i].prop || !tableHeader[i].label) {
            //没有label的不要管了
            continue
          }
          tableHeader[i].width = null
          break;
        }

        this.tableHeader = tableHeader
      },
      setTableHeaderAutoWidth: function (tableHeader, tableData) {
        for (let i = 0; i < tableHeader.length; i++) {
          if (!tableHeader[i].isShow || !tableHeader[i].prop || !tableHeader[i].label ||!tableHeader.width) {
            //没有label的不要管了
            continue
          }
          var prop = tableHeader[i].prop
          var maxWidth = this.getWidth(tableHeader[i].label) + 18//头部的字体比较大
          // console.log(prop + ":" + maxWidth)
          for (let j = 0; j < tableData.length; j++) {
//             console.log(tableData[j][prop])
//            console.log('-')
            var item = tableData[j][prop] ? tableData[j][prop].toString() : ''
            var width = this.getWidth(item)
            if (width > maxWidth) {
              maxWidth = width
            }
            tableHeader[i].width = maxWidth
          }
        }
        return tableHeader
      },

      getWidth: function (str) {
        var hanzLength = 0;
        var hanzRe = /[\u4E00-\u9FA5]/g;
        if (hanzRe.test(str)) {
          hanzLength = str.match(hanzRe).length
        }
        var otherLength = str.length - hanzLength
        var width = 18 + otherLength * 8.9 + hanzLength * 16 + 18

        if (width > 300) {
          return 300
        }
        return width
      },

      tableRowClassName: function (row) {

        if (row.row.isShowHighLight) {
          return 'warning-row';
        } else {
        }
      },

      tableCellClassName: function (row) {

        if (row.row.danger && row.row.danger[row.column.property] === true) {
          return 'danger-cell'
        } else if (row.row.warning && row.row.warning[row.column.property] === true) {
          return 'warning-row';
        }

      },
      handleChange: function (key,index, row) {
        this.$emit('handleChange', key,index, row)
      },
      handleEdit: function (index, row) {
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      handleClear: function (index, row) {
        this.$emit('handleClear', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },
      handleCurrentChange: function (val) {
        this.$emit("handleCurrentChange", val)
      },
      handleSelectionChange(val) {


//        if (val.length > 0) {
//          this.isShowDeleteButton = true
//          this.isShowCancelLightButton = true
//        } else {
//          this.isShowDeleteButton = false
//          this.isShowCancelLightButton = false
//        }
        this.$emit("handleSelectionChange", val)
      },
      deleteSelectionData() {
        this.dialogVisible = true
      },
      cancelLightSelectionData() {
        this.$emit("cancelLightSelectionData")
      },

      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0 || columnIndex === 1) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

    }
  }

</script>


<style>

  #div-table {

  }

  .el-table .el-table__expanded-cell {
    padding: 5px 50px;
  }

  .el-table .expand-item{
    display: inline-block;
    padding: 5px 0px;
    margin-left: 20px;
  }

  .el-button-delete-data {
    margin-bottom: 5px;
  }

  .el-table {
    /*margin-top: 5px;*/
    /*padding: 0 18px;*/
  }

  .el-table .warning-row {
    /*background-color: rgba(240,195,61,1);*/
    background-color: rgba(230, 162, 60, 0.8);
    /*background-color: rgba(235,158,5,0.2);*/
    color: #FFF;
  }

  .el-table .warning-row:hover > td {
    background-color: rgba(230, 162, 60, 1) !important;
    color: #FFF;
  }

  .el-table tr:hover .warning-row {
    background-color: rgba(230, 162, 60, 1) !important;
    color: #FFF;
  }

  .el-table .danger-cell {
    /*background-color: rgba(240,195,61,1);*/
    background-color: rgba(245, 108, 108, 0.8);
    /*background-color: rgba(235,158,5,0.2);*/
    color: #FFF;
  }

  .el-table .danger-cell:hover > td {
    background-color: rgba(245, 108, 108, 1) !important;
    color: #FFF;
  }

  .el-table tr:hover .danger-cell {
    background-color: rgba(245, 108, 108, 1) !important;
    color: #FFF;
  }

  .warning-row a, .warning-row a:link, .warning-row a:active, .warning-row a:visited, .warning-row a:hover {
    color: #FFF;
    text-decoration-color: #FFF;
  }

  .warning-row:hover a {
    color: #FFF;
    text-decoration-color: #FFF;
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 15px;
  }

  a.table-link {
    text-decoration: underline;
    text-decoration-color: rgb(26, 26, 166);

  }

  a:link {
    color: rgb(26, 26, 166);
  }

  a:active {
    color: rgb(26, 26, 166);
  }

  a:visited {
    color: rgb(26, 26, 166);
  }

  a:hover {
    color: rgb(26, 26, 166);
  }

  /*.cell{*/
  /*width: 250px !important;*/
  /*}*/

  /*tr td{*/
  /*width: 100px;*/
  /*}*/

</style>
